<template>
  <div class="home">
    <!-- 面包屑 -->
    <mbx name1="数据统计" name2="数据报表" />
    <el-card class="mt16">
      <div
        id="customerChart"
        :style="{ width: '900px', height: '300px' }"
      ></div>
    </el-card>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted, ref } from "vue";
import { gettb } from "../http/api.js";
import * as echarts from "echarts";
export default {
  setup(props) {
    const obj = reactive({});
    onMounted(async () => {
      let myChart = echarts.init(document.getElementById("customerChart"));
      const res = await gettb();
      const options = {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
      };
      const huizong = { ...options, ...res };
      myChart.setOption(huizong);
      // 屏幕图标自适应
      window.onresize = function () {
        myChart.style.width = "80%";
        myChart.style.height = "80%";
        //自适应大小
        myChart.resize();
      };

      // window.addEventListener("resize", myChart.resize);
      // let sizeFun = function () {
      //   myChart.resize();
      // };
      // window.addEventListener("resize", sizeFun);
    });
    return {
      ...toRefs(obj),
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
}
</style>
